feat: Add mode display indicators on task cards (#6493) #6501
Conversation
- Created ModeBadge component to display mode names with proper styling - Updated TaskItemHeader to show mode badge next to timestamp in history view - Updated TaskHeader to display mode badge in main chat view - Added comprehensive unit tests for ModeBadge component - Handles custom modes, deleted modes, and long mode names with truncation - Only displays badge when mode information exists (no empty badges)
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thank you for your contribution! I've reviewed the changes and found some issues that need attention. The implementation correctly addresses the issue requirements and includes comprehensive testing, but there are import path and styling concerns that should be addressed.
| @@ -0,0 +1,42 @@ | |||
| import React from "react" | |||
| import { getModeBySlug } from "@roo/modes" | |||
There was a problem hiding this comment.
Import path inconsistency detected. This uses while the rest of the codebase uses or patterns. Could we update this to match the project's import conventions?
| const displayName = mode?.name || modeSlug | ||
|
|
||
| // Truncate long mode names | ||
| const truncatedName = displayName.length > 20 ? `${displayName.substring(0, 17)}...` : displayName |
There was a problem hiding this comment.
The hard-coded truncation logic (20 characters, 17 + "...") might not work well for all languages or use cases. Could we consider making this configurable or using CSS for better performance and consistency?
| <StandardTooltip content={displayName}> | ||
| <Badge | ||
| variant="outline" | ||
| className={cn( |
There was a problem hiding this comment.
The styling overrides here conflict with the Badge variant's default styling. This could break visual consistency across the app. Is there a way to work with the existing Badge variants instead of overriding them?
| const mode = getModeBySlug(modeSlug, customModes) | ||
|
|
||
| // If mode is not found (e.g., deleted custom mode), show the slug as fallback | ||
| const displayName = mode?.name || modeSlug |
There was a problem hiding this comment.
The fallback to showing the raw slug might be confusing for users. Could we consider a more user-friendly fallback like "Unknown mode" or hide the badge entirely for deleted modes?
| // Mock dependencies | ||
| vi.mock("@roo/modes") | ||
| vi.mock("@/context/ExtensionStateContext") | ||
| vi.mock("@/components/ui", () => ({ |
There was a problem hiding this comment.
Mocking the entire module could be brittle. Could we consider more targeted mocks for just the components we need to test?
hannesrudolph
added
the
Issue/PR - Triage
hannesrudolph
added
PR - Draft / In Progress
and removed
Issue/PR - Triage
github-project-automation
bot
moved this from PR [Draft / In Progress]
to Done
in Roo Code Roadmap
2 participants
Description
Fixes #6493
This PR adds mode display indicators to task cards in both the main chat screen and history view, allowing users to quickly identify which mode was used for each task.
Changes Made
ModeBadgecomponent that displays mode names with proper VSCode theme stylingTaskItemHeaderto show mode badge next to timestamp in history viewTaskHeaderto display mode badge in main chat header areaTesting
Verification of Acceptance Criteria
Checklist
Screenshots/Demo
History View
Mode badges now appear next to the timestamp on task cards in the history view.
Main Chat View
Mode badge displays in the task header area, making it easy to see which mode is being used for the current task.
The implementation handles all edge cases including deleted custom modes (shows slug as fallback), long mode names (truncates with ellipsis), and ensures no empty badges appear for legacy tasks without mode data.
Important
Add
ModeBadgecomponent to display mode indicators on task cards in main chat and history views, with comprehensive testing.ModeBadgecomponent inModeBadge.tsxto display mode names with VSCode theme styling.TaskHeader.tsxto includeModeBadgenext to the timestamp in the main chat view.TaskItemHeader.tsxto includeModeBadgein the history view.ModeBadgeinModeBadge.spec.tsxcovering scenarios like long names, missing data, and custom classes.This description was created by
for f258f49. You can customize this summary. It will automatically update as commits are pushed.